<template>
    <div class="search">
      <el-row>
        <el-col :span="6">
          <!--建议输入框组件-->
          <el-autocomplete 
            v-model="city"
            :fetch-suggestions="loadCityList"
            placeholder="切换城市"
            @select="handleSelect"
          ></el-autocomplete>
        </el-col>
        <el-col :span="8">
          <!--显示日期面板-->
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            unlink-panels
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </el-col>
        <el-col :span="6">
          <!--弹出框-->
          <el-popover placement="bottom-start" width="300" v-model="visible">
            <div class="people">
              <span class="every">每间</span>
              <!--选择器-->
              <el-select
                v-model="adult"
                slot="prepend"
                placeholder="2 成人"
                size="mini"
                class="selectbox"
              >
              <!--option不影响上一次的显示-->
                <el-option
                  v-for="(item, index) in manList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>

              <el-select
                v-model="children"
                slot="prepend"
                placeholder="0 儿童"
                size="mini"
                class="selectbox"
              >
                <el-option
                  v-for="(item, index) in childrenList"
                  :key="index"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
  
              <div class="line"></div>
              <div class="botton" @click="sure">
                <el-button type="primary" size="mini">確定</el-button>
              </div>
            </div>
            <el-input
              placeholder="人数未定"
              suffix-icon="el-icon-user"
              v-model="people"
              slot="reference"
            >
            </el-input>
          </el-popover>
        </el-col>
        <el-button type="primary" @click="sendInfo">查看价格</el-button>
      </el-row>
  
      <el-row>
        <el-col :span="14">
          <el-row type="flex">
            <span class="title">区域:</span>
            <div class="box-r-f1">
              <el-col :class="{ area: !isShowPlace }">
                <span v-for="(item, index) in scenics" :key="index" class="place">
                  {{ item.name }}
                </span>
              </el-col>
              <div @click="showPlace">
                <span
                  class="ifontcont"
                  :class="{
                    'el-icon-arrow-down': !isShowPlace,
                    'el-icon-arrow-up': isShowPlace,
                  }"
                ></span>
                等多个区域
              </div>
            </div>
          </el-row>
          <el-row type="flex">
            <span class="title"
              >均价
              <span
                class="el-icon-question"
                title="等级均价由平日计算得出,节假日价格会有所上浮"
              ></span
              >:
            </span>
            <div
              class="box-r-f1"
              title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
            >
              <el-col :span="6">
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span>¥332</span>
              </el-col>
              <el-col
                :span="7"
                title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              >
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span>¥521</span>
              </el-col>
              <el-col
                :span="8"
                title="等级评定是针对房价，设施和服务等各方面水平的综合评估。"
              >
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span class="iconfont iconhuangguan"></span>
                <span>¥768</span>
              </el-col>
            </div>
          </el-row>
        </el-col>
        <!-- <el-col :span="10">
          <div></div>
        </el-col> -->
      </el-row>
    </div>
  </template>
  <script>
  export default {
  
    data() {
      return {
        city: "",
        name: "",
        value1: "",
        people: "",
        scenics: [],
        manList: [0, 1, 2, 3, 4, 5, 6],
        childrenList:[0,1,2,3,4],
        adult: "",
        children: "",
        isShowPlace: false,
        pickerOptions: {
          disabledDate: this.disabledDate,
        },
       map:"",
        visible: false,
        form: {
          city: "",
        
        },
      };
    },
    created() {
      this.sendInfo();
    },
  
    methods: {
      disabledDate(time) {
        return time.getTime() < Date.now() - 8.64e7;
      },
      sure() {
        this.visible = !this.visible;
        this.people = `${this.adult}成人 ${this.children}儿童`;
      },
   
      sendInfo() {
        this.$axios({
          url: "/cities",
          params: {
            name: this.city,
          },
        }).then((res) => {
          // console.log(res);
          this.scenics = res.data.data[0].scenics;
          this.form.city = res.data.data[0].id;
  
          this.$emit("searchData", this.form);
        });
      },
      loadCityList(queryString, showList) {
        this.$axios({
          url: "/cities",
          params: {
            name: queryString,
          },
        }).then((res) => {
          const data = res.data.data
            .filter((city) => {
              return city.sort;
            })
            .map((city) => {
              return {
                ...city,
                value: city.name,
              };
            });
          console.log(data);
          showList(data);
        });
      },
      handleSelect(item) {
        this.city = item.name;
        // this.name = item.name;
        this.sendInfo();
      },
      showPlace() {
        this.isShowPlace = !this.isShowPlace;
      },
   
    },
  };
  </script>
  <style lang='less' scoped>
  .search {
   .el-input__inner {
      width: 100%;
    }
    .area {
      height: 48px;
      overflow: hidden;
    }
    .title {
      width: 70px;
      color:#999999
    }
    .place {
      padding-right: 10px;
      font-size: 14px;
      color: #666666;
    }
    .el-icon-question {
      font-size: 16px;
      color: #cccccc;
    }
    .box-r-f1 {
      flex: 1;
    }
    .iconhuangguan {
      color: #ff9900;
    }
  }
 
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
    padding-right: 12px;
  }
  .people {
    height: 90px;
    .selectbox {
      width: 100px;
    }
    .line {
      width: 100%;
      height: 1px;
      border-top: 1px solid #dddddd;
  
      margin-top: 20px;
    }
    .every {
      display: inline-block;
      width: 80px;
    }
    .botton {
      padding: 15px;
      text-align: right;
    }
  }
  </style>